<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })" style="background: #009865">
        <a class="site-navbar__brand-lg" href="javascript:;" style="background: #009865">
          <img :src="logoImg" style="width: 24px"/>
          <span style="letter-spacing: 1px;font-weight: normal !important;">智慧种植管理</span>
        </a>
        <a class="site-navbar__brand-mini" href="javascript:;" style="background: #009865"><img :src="logoImg" style="width: 24px"/></a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix" style="background:#009865">
      <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
<!--          <icon-svg name="zhedie"></icon-svg>-->
          <img :src="zhedieImg" style="width:22px"/>
        </el-menu-item>
      </el-menu>
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">
        <el-menu-item index="1">
          <template slot="title">

<!--              {{currentDate}}-->
<!--              <i class="el-icon-time" style="margin-left: 2px;margin-right: 2px;font-size: 14px"/>-->
<!--              {{currentTime}}-->
              <div @click="HandleClick(1)">
                <img :src="dapingImg" style="width:20px"/>
                <span style="color:#fff">大屏</span>
              </div>
          </template>
        </el-menu-item>
        <el-menu-item index="2">
          <template slot="title">
            <div @click="HandleClick(2)">
              <img :src="gaunliImg" style="width:20px"/>
              <span style="color:#fff">系统管理</span>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item index="3">
          <template slot="title">
            <div @click="HandleClick(3)">
              <img :src="yanganImg" style="width:20px"/>
              <span style="color:#fff">遥感指挥系统</span>
            </div>
          </template>
        </el-menu-item>
        <el-menu-item index="4">
          <template>
            <div @click="logoutHandle">
              <span style="color:#fff">{{ userName }}</span><img :src="tuichuImg" style="width:20px;margin-left:10px"/>
            </div>

          </template>
<!--          <el-dropdown :show-timeout="0" placement="bottom">-->
<!--            <span class="el-dropdown-link">-->

<!--              <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}-->
<!--            </span>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>-->
<!--              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </nav>
</template>

<script>
  import {format, getDay} from 'date-fns'
  import UpdatePassword from './main-navbar-update-password'
  import { clearLoginInfo } from '@/utils'
  export default {
    data () {
      return {
          dapingImg: require("@/assets/img/daping.png"),
          gaunliImg: require("@/assets/img/xitong.png"),
          yanganImg: require("@/assets/img/yaogan.png"),
          zhedieImg: require("@/assets/img/zhedie.png"),
          tuichuImg: require("@/assets/img/tuichui.png"),
          logoImg: require("@/assets/img/logo.png"),
        updatePassowrdVisible: false,
        intervalId: null,
        currentDate: this.getCurrentDate(),
        currentTime: this.getTime()
      }
    },
    components: {
      UpdatePassword
    },
    computed: {
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      }
    },
    mounted(){
        this.intervalId = setInterval(()=>{
            this.currentTime = this.getTime()
        },300)
    },
    destroyed(){
        clearInterval( this.intervalId)
        this.intervalId = null
    },
    methods: {
      getCurrentDate(){
          return this.formatDate(new Date().getTime(), 'yyyy年MM月dd日') + "  " +  this.convertWeek(this.formatGetDay(new Date().getTime())) + "  "
      },
      getTime(){
          return this.formatDate(new Date().getTime(), 'HH:mm:ss')
      },
      convertWeek(day){
          switch (day) {
              case 1:
                  return "星期一";
              case 2:
                  return "星期二";
              case 3:
                  return "星期三";
              case 4:
                  return "星期四";
              case 5:
                  return "星期五";
              case 6:
                  return "星期六";
              default:
                  return "星期日"
          }
      },
      formatGetDay(timestamp){
          return getDay(timestamp)
      },
      formatDate (timestamp, reg="yyyy-MM-dd HH:mm:ss") {
          return format(new Date(timestamp*1), reg)
      },
      // 修改密码
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
        HandleClick(index){
          if(index==1){
              // window.open("http://39.97.187.7:8111/")
			  window.open('http://8.141.72.168:8111/#/');
              return
          }else if(index==2){
              window.location.href="http://218.8.57.184:19099/"
          }
          this.$message({type:"warn", message:"敬请期待..."})
        },
      // 退出
      logoutHandle () {
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // TODO: response中包含退出后重定向地址，需要解构响应信息获得
            const loading = this.$load(this)
          this.$http({
            url: this.$http.adornUrl('/oauth/logout'),
            method: 'post'
          }).then((response) => {
              loading.close()
              console.log("response====>",response)
              clearLoginInfo()
              window.location.href = "http://218.8.57.184:19099"
          }).catch(err=>{
              loading.close()
              clearLoginInfo()
              window.location.href = 'http://218.8.57.184:19099'
          })
        }).catch(() => {})
      }
    }
  }
</script>
<style scoped>
  .site-navbar /deep/.el-menu-item:focus, .el-menu-item:hover {
    outline: 0;
    background-color: rgb(126 218 172) !important;
  }
  .site-navbar /deep/ .el-menu-item{
    padding: 0px 10px !important;
  }
</style>
